<template>
    <d2-container :filename="filename">
        <template slot="header">
            <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            </el-form>
        </template>
        <el-table v-loading="listLoading" :data="tableData"
                  border fit highlight-current-row style="width: 100%;">

            <el-table-column label="订单编号" min-width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="用户编号" width="80" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.user_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="订单状态" width="180" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.main_status | statusTypeFilter">
                        {{ scope.row.main_status | statusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="业务状态" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="scope.row.tx_status | txStatusTypeFilter">
                        {{ scope.row.tx_status | txStatusValueFilter}}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="累计支付金额" width="100" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.total_fee }}</span>
                </template>
            </el-table-column>

            <el-table-column label="用户订单备注" width="180" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.user_remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发货时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.delivery_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="支付时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.pay_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="租赁开始时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.start_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="租赁结束时间" width="150" align="center">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.end_time }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" min-width="150px" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain icon="el-icon-view"
                               @click="pushDetailPage(scope.row)"
                               type="primary">查看详情
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <template slot="footer">
            <pagination v-show="total>0"
                        :total="total"
                        :page.sync="queryParam.current"
                        :limit.sync="queryParam.size"
                        @pagination="getList"/>
        </template>
    </d2-container>
</template>

<script>
    import {page} from "@/api/order/lease-order";
    import Pagination from '@/components/Pagination'

    const statusOptions = [
        {key: 'PENDING_PAYMENT', display_name: '待付款'},
        {key: 'PENDING_DELIVERY', display_name: '待发货'},
        {key: 'PENDING_RECEIVING', display_name: '待收货'},
        {key: 'PENDING_RETURNED', display_name: '待归还'},
        {key: 'CLOSED', display_name: '已完成'}
    ];

    const statusKeyValue = statusOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.display_name;
        return acc
    }, {});

    const txStatusOptions = [
        {key: 'NORMAL', display_name: '正常'},
        {key: 'BREAKING', display_name: '违约'},
        {key: 'REPAIRING', display_name: '维修'}
    ];

    const txStatusKeyValue = txStatusOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.display_name;
        return acc
    }, {});

    export default {
        name: "order-list",
        components: {
            Pagination
        },
        filters: {
            statusTypeFilter(status) {
                const statusMap = {
                    PENDING_PAYMENT: '',
                    PENDING_DELIVERY: 'info',
                    PENDING_RECEIVING: 'danger',
                    PENDING_RETURNED: 'warning',
                    CLOSED: 'success',
                };
                return statusMap[status];
            },
            statusValueFilter(status) {
                return statusKeyValue[status];
            },
            txStatusTypeFilter(status) {
                const statusMap = {
                    REPAIRING: 'info',
                    BREAKING: 'danger',
                    NORMAL: 'success',
                };
                return statusMap[status];
            },
            txStatusValueFilter(status) {
                return txStatusKeyValue[status];
            }
        },
        data() {
            return {
                filename: __filename,
                tableData: [],
                total: 0,
                listLoading: false,
                queryParam: {
                    current: 1,
                    size: 10,
                    dbName: undefined,
                    tableName: undefined
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                this.listLoading = true;
                page(this.queryParam).then(res => {
                    this.tableData = res.records;
                    this.total = parseInt(res.total);
                    this.listLoading = false;
                })
            },
            pushDetailPage(row) {
                this.$router.push('/order/detail/' + row.id)
            }
        }
    }
</script>

<style>

    .el-table .breaking-row {
        background: rgb(253, 226, 226)
    }


</style>
